<template>
  <div class="main-container">
    <div class="header-container">
      <div class="main-header">
        <div class="title-link title-link-left">
          <el-menu
            :default-active="activeIndex"
            class="menu"
            mode="horizontal"
            popper-class="main-popper"
            router
            :ellipsis="false"
            @select="handleSelect"
          >
            <el-menu-item
              :index="item.index"
              v-for="item in leftMenu"
              :key="item"
              @click="handleSelectItem(item)"
            >
              <img
                :src="activeIndex == item.index ? item.activeIcon : item.icon"
                alt=""
              />
              <span>{{ item.name }}</span>

              <div class="active-line" v-if="activeIndex == item.index"></div>
              <div class="line" v-else></div>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="title-name">
          <h1>
            <div>
              <!-- <a class="title-logo" href="/">&nbsp;</a> -->
              <span class="title-text"
                >数&nbsp;智&nbsp;低&nbsp;空&nbsp;空&nbsp;管&nbsp;服&nbsp;务&nbsp;平&nbsp;台</span
              >
            </div>
          </h1>
        </div>
        <div class="title-link title-link-right">
          <el-menu
            :default-active="activeIndex"
            class="menu"
            mode="horizontal"
            popper-class="main-popper"
            router
            :ellipsis="false"
            @select="handleSelect"
          >
            <el-menu-item
              :index="item.index"
              v-for="item in rightMenu"
              :key="item"
              @click="handleSelectItem(item)"
            >
              <img
                :src="activeIndex == item.index ? item.activeIcon : item.icon"
                alt=""
              />
              <span>{{ item.name }}</span>

              <div class="active-line" v-if="activeIndex == item.index"></div>
              <div class="line" v-else></div>
            </el-menu-item>
          </el-menu>
        </div>

        <!-- <div class="titile-right">22</div> -->
      </div>
    </div>
    <div
      style="
        height: calc(100vh - 55px);
        width: 100vw;
        position: absolute;
        top: 55px;
        overflow: hidden;
      "
    >
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import geographyIcon from "./assets/images/geography-icon.svg";
import activeGeographyIcon from "./assets/images/active-geography-icon.svg";
import digitalAirspaceManageIcon from "./assets/images/digitalAirspaceManage.svg";
import activeDigitalAirspaceManageIcon from "./assets/images/active-digitalAirspaceManage.svg";
import routeEstablishIcon from "./assets/images/routeEstablishIcon.svg";
import activeRouteEstablishIcon from "./assets/images/active-routeEstablishIcon.svg";
import flightPlan from "./assets/images/flightPlan.svg";
import activeFlightPlan from "./assets/images/active-flightPlan.svg";
import airportManage from "./assets/images/airportManage.svg";
import activeAirportManage from "./assets/images/active-airportManage.svg";
import flowMonitor from "./assets/images/flowMonitor.svg";
import activeflowMonitor from "./assets/images/active-flowMonitor.svg";
import cooperateControl from "./assets/images/cooperateControl.svg";
import activeCooperateControl from "./assets/images/active-cooperateControl.svg";
import safetyEmergency from "./assets/images/safetyEmergency.svg";
import activeSafetyEmergency from "./assets/images/active-safetyEmergency.svg";
import effectiveEvaluation from "./assets/images/effectiveEvaluation.svg";
import activeEffectiveEvaluation from "./assets/images/active-effectiveEvaluation.svg";
import user from "./assets/images/user.svg";
import activeUser from "./assets/images/active-user.svg";
import intelligence from "./assets/images/intelligence.svg";
import activeIntelligence from "./assets/images/active-intelligence.svg";
import more from "./assets/images/more.svg";
import activeMore from "./assets/images/active-more.svg";
import { RouterView } from "vue-router";
import { ref, provide } from "vue";

const activeIndex = ref("/digitalAirspaceManage");

const leftMenu = ref([
  {
    name: "地理信息",
    icon: geographyIcon,
    activeIcon: activeGeographyIcon,
    index: "/geographicInfoManagement",
  },
  {
    name: "空域管理",
    icon: digitalAirspaceManageIcon,
    activeIcon: activeDigitalAirspaceManageIcon,
    index: "/digitalAirspaceManage",
  },
  {
    name: "航线画设",
    icon: routeEstablishIcon,
    activeIcon: activeRouteEstablishIcon,
    index: "/routeEstablish",
  },
  {
    name: "计划服务",
    icon: flightPlan,
    activeIcon: activeFlightPlan,
    index: "/flightPlan",
  },
  {
    name: "机场管控",
    icon: airportManage,
    activeIcon: activeAirportManage,
    index: "/airportManage",
  },
  {
    name: "状态监视",
    icon: flowMonitor,
    activeIcon: activeflowMonitor,
    index: "/flowMonitor",
  },
]);

const rightMenu = ref([
  {
    name: "协同管制",
    icon: cooperateControl,
    activeIcon: activeCooperateControl,
    index: "/cooperateControl",
  },
  {
    name: "安全应急",
    icon: safetyEmergency,
    activeIcon: activeSafetyEmergency,
    index: "/safetyEmergency",
  },
  {
    name: "效能评估",
    icon: effectiveEvaluation,
    activeIcon: activeEffectiveEvaluation,
    index: "/effectiveEvaluation",
  },
  {
    name: "用户终端",
    icon: user,
    activeIcon: activeUser,
    index: "/effectiveEvaluation",
  },
  {
    name: "情报服务",
    icon: intelligence,
    activeIcon: activeIntelligence,
    index: "/effectiveEvaluation",
  },
  {
    name: "更多",
    icon: more,
    activeIcon: activeMore,
    index: "/more",
  },
]);

const handleSelect = (val) => {
  console.log(val);
  activeIndex.value = val;
};

const handleSelectItem = (val) => {};

const rightAsideTableVisible = ref(false);

const setRightAsideTableVisible = (value) => {
  rightAsideTableVisible.value = value;
};

provide("rightAsideTableVisible", rightAsideTableVisible);
provide("setRightAsideTableVisible", setRightAsideTableVisible);
</script>

<style scoped lang="scss">
.main-container {
  height: 100vh;
  width: 100vw;
  background: url("./assets/images/bg.png") no-repeat center !important;
  background-size: 100% 100%;
  overflow: hidden;
  .header-container {
    // background-color: #042439;
    position: absolute;
    z-index: 114;
    width: 100%;
    .main-header {
      background: url("@/assets/images/title_bg3.png") no-repeat left;
      background-size: 100% 100%;
      height: 77px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h1 {
        padding: 0;
        margin: 0;
        // .title-logo {
        //   display: inline-block;
        //   width: 54px;
        //   height: 54px;
        //   margin-bottom: 2px;
        //   margin-left: 20px;
        //   background: url("./assets/images/nuaa_logo.png") no-repeat;
        //   background-size: 100% 100%;
        // }
      }
      .title-name {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin-bottom: 3px;
        // width: 40%;
        .title-text {
          font-size: 30px;
          color: #bbeaff;
        }
      }
      .title-link {
        width: 30%;
        // flex: 1;
        // background: pink;
        height: 100%;
        // width: 60%;
        // padding-top: 14px;
        box-sizing: border-box;
        .menu {
          display: flex;
          justify-content: space-between;
          height: 100%;
          width: 100%;
          background-color: transparent;
          border: 0;
          padding: 0;
          --el-menu-hover-bg-color:red
          // margin-top: 16.4px;
          // 默认item样式
          .el-menu-item {
            display: flex;
            flex-direction: column;
            color: #adcee5;
            border: 0;
            width: 16.66%;
            // height: 100%;
            // height: calc(56px - 16px);
            // line-height: calc(100%);
            color: #94ceff;
            font-size: 10px;
            line-height: normal;
            > span {
              margin-top: 2px;
            }
            .active-line {
              margin-top: 2px;
              height: 3px;
              width: 110%;
              border-radius: 3px;
              background-color: rgba(0, 252, 255, 1);
            }
            .line {
              margin-top: 2px;
              height: 3px;
              width: 110%;
              border-radius: 3px;
              // background-color: rgba(0, 252, 255, 1);
            }
            // letter-spacing: 100px;
            // background: url("./assets/images/focus.png") no-repeat;
            // background-size: 100% 100%;
            // min-width: 86px;
            // padding: 0 28px;
          }
          // 默认样式
          .el-sub-menu {
            border: 0;
            background: url("./assets/images/focus.png") no-repeat;
            background-size: 100% 100%;

            :deep(.el-sub-menu__title) {
              color: #adcee5;
              line-height: calc(100%);
              border-bottom: 0px;
              padding: 0 30px 0 30px;
              .el-icon {
                display: none;
              }
            }
            :deep(.el-sub-menu__title:hover) {
              background-color: transparent;
            }
          }
          // 激活item样式
          .is-active {
            color: rgba(0, 252, 255, 1) !important;
            // background: url("./assets/images/focus-on.png") no-repeat;
            // background-size: 100% 138%;
            border: 0;
          }
          .el-menu--horizontal,
          .el-menu-item:not(.is-disabled):hover {
            background-color: rgba(0, 252, 255, 0) !important;
          }
        }
      }
      .title-link-left {
        box-sizing: border-box;
        padding-left: 2%;
        // height: 100%;
        // width: 12%;
        // background: fuchsia;
      }
      .title-link-right {
        box-sizing: border-box;
        padding-right: 2%;
        // height: 100%;
        // width: 12%;
        // background: fuchsia;
      }
    }
  }
}
</style>
